<template>
  <div>

    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/admin' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item><a href="/admin/brand/list">品牌管理</a></el-breadcrumb-item>
      <el-breadcrumb-item>品牌列表</el-breadcrumb-item>
    </el-breadcrumb>

    <h3 style="margin: 20px 0;">品牌列表</h3>

    <el-table :data="tableData" border style="width: 100%">
      <el-table-column prop="id" label="ID" width="80" align="center"></el-table-column>
      <el-table-column prop="name" label="名称" width="150"align="center"></el-table-column>
      <el-table-column prop="pinyin" label="名称拼音" width="180"align="center"></el-table-column>

      <el-table-column prop="keywords" label="关键词" align="center"></el-table-column>
      <el-table-column prop="productCount" label="商品数量" width="80"align="center"></el-table-column>
      <el-table-column prop="sales" label="销量" width="80"align="center"></el-table-column>

      <el-table-column label="好评 / 评论总数" width="150"align="center">
        <template slot-scope="scope"><!-- 插槽：允许父组件向子组件传递内容的机制-->
          <span v-text="scope.row.positiveCommentCount"></span> / <span v-text="scope.row.commentCount"></span>
        </template>
      </el-table-column>

      <el-table-column prop="enable" label="是否启用" width="80"align="center">
        <template slot-scope="scope">
          <el-switch
              v-model="scope.row.enable"
              active-color="#13ce66"
              inactive-color="#999"
              :active-value="1"
              :inactive-value="0">
          </el-switch>
        </template>
      </el-table-column>

      <el-table-column label="操作" width="120" align="center">
        <template slot-scope="scope">
          <el-button size="medium" type="primary"
              @click="handleEdit(scope.row.id)" icon="el-icon-edit-outline" circle></el-button>
          <el-button size="medium" type="danger"
              @click="openDeleteConfirm(scope.row.id)" icon="el-icon-delete" circle></el-button>
        </template>
      </el-table-column>

    </el-table>

  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: []
    }
  },
  methods:{
    handleEdit(id) {
      console.log(id);
    },
    openDeleteConfirm(id) {
      this.$confirm('此操作将永久删除该品牌, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.handleDelete(id);
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    handleDelete(id) {
      console.log(id);
      let url = "http://localhost:9080/brands/"+id+"/delete";
      this.axios.post(url).then((response)=>{
        let jsonResult = response.data;
        if(jsonResult.code == 20000){
          this.$message({
            message: '删除品牌成功',
            type: 'success'
          });
        }else{
          this.$message.error(jsonResult.message);
        }
        // 执行显示品牌列表
        this.loadBrands();
      })
    },
    loadBrands:function(){
      let url = "http://localhost:9080/brands";
      this.axios.get(url).then((response)=>{
        let jsonResult = response.data;
        if(jsonResult.code == 20000){
          // console.log(jsonResult.data);
          this.tableData = jsonResult.data;
        }else{
          this.$message.error(jsonResult.message);
        }
      })
    }
  },
  created() { // 已创建 ，将在mounted、显示页面之前执行
    console.log("created");
  },
  mounted() { // 已挂载 ，将在created之后、显示页面之前执行
    console.log("mounted");
    this.loadBrands();
  }

}
</script>